<template>
	<div class="mt10">
		<ul class="bread-nav">
			<li class="nav-item" v-for="(item, index) in tabsList" :key="index" :class="{'active':activeName>=item.value?true:false}" @click="handleTabChange(item)">
        <span>{{ item.label }}</span>
			</li>
		</ul>
		<OrgBuild v-if="activeName ==1" @change="handleChange"></OrgBuild>
		<BuildPage v-if="activeName ==2" @change="handleChange" :paramsObj="{creditCode:orgInfo.creditCode}"></BuildPage>
		<BedPage v-if="activeName ==3" @change="handleChange"  :paramsObj="{creditCode:orgInfo.creditCode,belongBuliding:buildInfo.buildingName}"></BedPage>
	</div>
</template>

<script setup lang="ts">
import BuildPage from './BuildPage/index.vue'
import BedPage from './BedPage/index.vue'
import OrgBuild from './OrgBuild/index.vue'

let activeName = ref(1) as any

const orgInfo = ref({
  creditCode:''
})
const buildInfo = ref({
  buildingName:'',
})
const tabsList = [
	{ label: '床态图首页', value: 1 },
	{ label: '楼宇', value: 2 },
	{ label: '床位', value: 3 },
]

const handleChange = (row,active)=> {
  if(active ==1) {
    orgInfo.value = row
  }
  if(active ==2) {
    buildInfo.value = row
  }
  if(active <=2) {
    activeName.value = active +1
  }
}
const handleTabChange = (item)=> {
  if(item.value<=activeName.value) {
    activeName.value = item.value
  }
}
</script>

<style scoped lang="scss">
.bread-nav {
  display: flex;
  align-items: center;
  gap:20px;
  .nav-item {
    color: #9ea0a5;
    font-weight: 600;
    position: relative;
    &:not(:last-child)::after {
      content: '/';
      position: absolute;
      right: -10px;
      top: 45%;
      height: 100%;
      transform: translateY(-50%);
      color: #9ea0a5
    }
  }
  .active {
    color: #000 !important;
  }
}
</style>
